<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script src="/js/jquery.min.js"></script>
    <script src="/js/assets/amazeui.widgets.helper.min.js"></script>
    <script src="/js/assets/amazeui.widgets.helper.js"></script>
    <script src="/js/assets/amazeui.ie8polyfill.min.js"></script>
    <script src="/js/assets/amazeui.ie8polyfill.js"></script>
    <script src="/js/assets/amazeui.min.js"></script>
    <script src="/js/assets/amazeui.js"></script>
    <script src="/js/mui.min.js"></script>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap-treeview.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/assets/amazeui.min.css">
    <link rel="stylesheet" type="text/css" href="/css/assets/amazeui.css">
    <link rel="stylesheet" type="text/css" href="/css/mui.min.css">

    <style>
        body {
            font-size: 12px;
        }

        .am-u-sm-10 {
            width: 58%;
        }

        .am-u-sm-2 {
            width: auto;
        }

        .am-form-group {
            height: 30px;
            margin: 0;
        }

        img.am-thumbnail, .am-thumbnail > img, .am-thumbnail a > img {
            margin-top: 115px;
        }

        form {
            height: 100%;
        }

        .am-btn am-btn-danger {
            height: 20px;
            font-size: 5px;
            padding: 0 23px;
        }

        button, input:not([type="radio"]):not([type="checkbox"]), select {
            height: 20px;
            font-size: 12px;
        }

        [class*="am-u-"] + [class*="am-u-"]:last-child {
            float: right;
            height: 20px;
            background: none;
            text-align: right;
        }

        #sub {
            background: red;
            height: 50px;
            width: 100%;
            text-align: center;
            margin-top: 20%;
        }

        #middlePopover1 {
            width: 68%;
            position: absolute;
            top: 100px;
            left: 18%;
            display: none;
        }

        #bg {
            width: 100%;
            height: 100%;
            background-color: #000;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.3;
            display: none;
        }

        #TageBranchID {
            display: inline;
            width: 136px;
        }

        .mui-scroll-wrapper {
            font-size: 14px;
            background: white;
        }

        .am-btn am-btn-danger {
            height: 20px;
            font-size: 5px;
            padding: 0 23px;
        }

        #middlePopover1 {
            height: 200px;
        }
        #TageBranchID{
            background: none;
            border: none;
        }
        #branch{
            margin-top: 40%;
        }
    </style>
</head>
<body>
<form action="/addBranch" method="post" enctype="multipart/form-data">

    <div class="am-form-group">
        <label for="fd_BranchName" class="am-u-sm-2 am-form-label">组织名称</label>
        <div class="am-u-sm-10">
            <input type="text" class="am-form-field" id="fd_BranchName" name="fd_BranchName">
        </div>
    </div>

    <div class="am-form-group">
        <label for="fd_unitName" class="am-u-sm-2 am-form-label">单位名称</label>
        <div class="am-u-sm-10">
            <input type="text" class="am-form-field" id="fd_unitName" name="fd_unitName">
        </div>
    </div>

    <div class="am-form-group">
        <label for="fd_PartyCount" class="am-u-sm-2 am-form-label">党员数量</label>
        <div class="am-u-sm-10">
            <input type="text" class="am-form-field" id="fd_PartyCount" name="fd_PartyCount">
        </div>
    </div>

    <div class="am-form-group">
        <label for="fd_BranchMark">成立原因</label>
        <textarea class="" rows="5" id="fd_BranchMark" name="fd_BranchMark"></textarea>
    </div>


        <div class="am-form-group" id="branch">
            <label for="TageBranchID" class="am-u-sm-2 am-form-label">上级党组织</label>
            <div class="am-u-sm-10">
                <input type="text" readonly="readonly" id="fd_TageBranchID" name="fd_ParentBranchID" hidden="hidden">
                <input type="text" id="TageBranchID" name="fd_parentName" class="am-form-field">
                <a href="#middlePopover1" class="am-btn am-btn-danger" onclick="middleBolck()">请选择</a>
            </div>
        </div>


    <input type="submit" value="提交申请" id="sub" class="am-btn am-btn-danger">

</form>
<div id="bg" onclick="middleNone()"></div>
<div id="middlePopover1" class="mui-popover">
    <div class="mui-popover-arrow"></div>
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll" id="treeview-searchable1">
        </div>
    </div>
</div>
</body>
<script>
    mui('.mui-scroll-wrapper').scroll();

    function middleBolck() {
        var middlePopover1 = document.getElementById("middlePopover1");
        middlePopover1.style.display = "block";
        var s = document.getElementById("bg");
        s.style.display = "block";
    }

    function middleNone() {
        var middlePopover1 = document.getElementById("middlePopover1");
        middlePopover1.style.display = "none";
        var s = document.getElementById("bg");
        s.style.display = "none";
    }

    loadPart2();

    function loadPart2() {
        //$("#middlePopover .mui-table-view").;
        var li = "";
        $.ajax({
            url: 'getTblPartyOrgBranchAll',
            dataType: 'text',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            success: function (data) {
                var jsondata = JSON.parse(data);
                console.log(data);
                var $searchableTree = $('#treeview-searchable1').treeview({
                    data: jsondata,
                    onNodeSelected: function (event, node) {
                        console.log(node.text);
                        $("#TageBranchID").val(node.text);
                        $("#fd_TageBranchID").val(node.fd_BranchID);
                        $("#middlePopover1").hide();
                        $("#bg").hide();
                        $(".mui-backdrop").remove();
                    },

                });

            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        });
    }
</script>
</html>